<template>
  <view class="discuss">
    <view v-if="titleShow" class="title u-m-b-20 u-flex u-row-between">
      <view class="name">讨论</view>
      <!-- <navigator url="/pages/classify/" open-type="navigate" hover-class="none" class="more">
        更多 <u-icon name="arrow-right" size="26" color="#999"></u-icon>
      </navigator> -->
    </view>
    <view class="list">
      <view @click="linkDetail(item.id)" v-for="(item, index) in discussList" :key="index" class="item u-p-20">
        <view class="info u-flex u-row-between">
          <view @click.stop="linkUserDetail(item)">
            <u-image :src="item.avatar" mode="aspectFill" width="75" height="75" shape="circle"></u-image>
          </view>
          <view class="uname u-flex-1 u-m-l-20">{{item.nickname || ""}}</view>
          <slot v-bind:info="item"></slot>
        </view>
        <view @click.stop="bubbling" class="con">
          <u-read-more show-height="100" :toggle="true" close-text="全文" font-size="26" color="#389bf2" :shadow-style="shadowStyle" text-indent="0">
            <view class="u-font-26">{{item.content || ""}}
              <text v-if="!isInquire" class="tag"># {{topicTitle || ""}} #</text>
            </view>
          </u-read-more>
        </view>
        <view @click.stop="bubbling" class="u-flex u-flex-wrap u-row-col">
          <template v-for="(its) in item.images">
            <view :key="its" class="items">
              <u-image @click="previewImage(index)" :src="its" class="image" mode="aspectFill" height="200"></u-image>
            </view>
          </template>
          <template v-for="(its) in item.files">
            <view :key="its" class="items">
              <video :src="its" :controls="false" :disabled="false">
                <cover-view @click.stop="previewVideo(its)" class="video-fixed"></cover-view>
              </video>
            </view>
          </template>
        </view>
        <view class="u-flex u-flex-wrap u-row-col">
        </view>
        <view class="u-m-t-20 u-flex u-flex-wrap u-row-col">
          <view v-for="(its, ind) in item.files" :key="ind" class="image">

          </view>
        </view>
        <view class=""></view>
        <template v-if="isInquire">
          <view class="address u-p-l-20 u-font-26 u-rela">
            {{item.address || ""}} {{item.danwei || ""}}
          </view>
        </template>
        <view class="bottom u-m-t-30 u-flex u-row-between">
          <view v-if="isInquire" @click.stop="fabulous(index, item.id, item.is_d, item.dian)" class="icon">
            <u-icon name="thumb-up" size="44" :color="item.is_d == 1 ? `#389bf2` : '#666'"></u-icon>
            <view :class="{active: item.is_d == 1}" class="number">{{item.dian || ""}}</view>
            <view :class="{active: item.is_d == 1}" class="text">赞同</view>
          </view>
          <view v-else @click.stop="fabulous(index, item.id, item.is_qtd, item.dian)" class="icon">
            <u-icon name="thumb-up" size="44" :color="item.is_qtd == 1 ? `#389bf2` : '#666'"></u-icon>
            <view :class="{active: item.is_qtd == 1}" class="number">{{item.dian || ""}}</view>
            <view :class="{active: item.is_qtd == 1}" class="text">赞同</view>
          </view>
          <view class="icon">
            <u-icon name="chat" size="48" color="#666"></u-icon>
            <view class="number">{{item.p_num || item.pinglun || ""}}</view>
            <view class="text">评论</view>
          </view>
          <u-button open-type="share" hover-class="none" :custom-style="confirmBtnStyle" class="icon">
            <u-icon name="zhuanfa" size="44" color="#666"></u-icon>
            <view class="number">{{item.fenxiang || ""}}</view>
            <view class="text">分享</view>
          </u-button>
        </view>
      </view>
    </view>
    <view class="preview-full" v-if="previewVideoSrc">
      <video :src="previewVideoSrc" :autoplay="true" :show-fullscreen-btn="false">
        <cover-view class="close" @click="previewVideoClose">
          <u-icon name="close" size="40" color="#333"></u-icon>
        </cover-view>
      </video>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "com-discuss",
  data() {
    return {
      value: "",
      confirmBtnStyle: {
        margin: "0",
        padding: "0",
        fontSize: "28rpx",
        lineHeight: "normal",
      },
      shadowStyle: {
        backgroundImage: "none",
      },
      previewVideoSrc: "",
    };
  },
  props: {
    // 标题是否显示
    titleShow: {
      type: Boolean,
      default: true,
    },
    // 打听/话题
    isInquire: {
      type: Boolean,
      default: false,
    },
    // 讨论
    discussList: {
      type: Array,
      default: () => [],
    },
    // 话题高亮显示
    topicTitle: {
      type: [String],
      default: "",
    },
    // 是否跳转
    isLink: {
      type: [Boolean],
      default: true,
    },
  },
  computed: {
    ...mapState(["vuex_user_id"]),
  },
  methods: {
    // 点赞
    fabulous(index, id, status, number) {
      this.$emit("fabulous", {
        index: index,
        id: id,
        status: status,
        number: number,
      });
    },
    // 链接
    linkComment(id, uid) {
      let url = this.isInquire
        ? `/pages/subpackages/classify/inquire/comment?id=${id}&uid=${uid}`
        : `/pages/subpackages/topic/comment/index?id=${id}`;
      uni.navigateTo({ url });
    },
    // 链接评论列表页
    linkDetail(id) {
      if (!this.isLink) return;
      let url = this.isInquire
        ? `/pages/subpackages/classify/inquire/detail?id=${id}`
        : `/pages/subpackages/topic/detail/detail?id=${id}&content=${this.topicTitle}`;
      uni.navigateTo({ url });
    },
    // 跳转详情
    linkUserDetail(data) {
      let url =
        data.is_lvs == 1
          ? `/pages/subpackages/detail/lawyer?id=${data.user_id}`
          : `/pages/subpackages/detail/user?id=${data.user_id}`;
      uni.navigateTo({
        url,
      });
    },
    // 阻止冒泡行为
    bubbling() {},
    // 查看大图
    previewImage(index) {
      uni.previewImage({
        urls: this.discussList[index].images,
      });
    },
    // 查看视频
    previewVideo(src) {
      this.previewVideoSrc = src;
    },
    // 关闭视频
    previewVideoClose() {
      this.previewVideoSrc = "";
      console.log("previewVideoClose", this.previewVideoSrc);
    },
  },
};
</script>

<style lang="scss" scoped>
.discuss {
  .name {
    padding: 0 10rpx;
    border-left: 3px solid $uni-bg-color-main;
    font-weight: bold;
  }

  .more {
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }

  .item {
    background-color: $uni-bg-color;
    border-radius: 10rpx;

    &:nth-child(n + 2) {
      margin: 20rpx 0 0;
    }
  }

  .con {
    margin: 20rpx 0;
    line-height: 1.6;

    .tag {
      color: $uni-text-color-main-orange;
    }
  }

  .items {
    flex: 0 0 32%;
    height: 200rpx;

    &:nth-child(3n + 2) {
      margin: 0 2%;
    }

    &:nth-child(n + 4) {
      margin-top: 10rpx;
    }
  }

  video {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }

  .address {
    margin: 20rpx 0;
    color: $uni-text-color-grey;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 4px;
      background-color: $uni-text-color-grey;
      border-radius: 50%;
    }
  }

  .bottom {
    .icon {
      display: flex;
      align-items: center;

      &.spot {
        font-size: 50rpx;
        letter-spacing: 2px;
      }
    }

    .number {
      margin: 0 10rpx;
      color: $uni-text-color-dark;

      &.active {
        color: $uni-text-color-main;
      }
    }

    .text {
      color: $uni-text-color-dark;

      &.active {
        padding: 2rpx 8rpx;
        background-color: rgba($uni-text-color-main, $alpha: 0.2);
        border-radius: 4rpx;
        color: $uni-text-color-main;
      }
    }
  }
}

.video-fixed {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  z-index: 996;
}

.preview-full {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;

  video {
    width: 100%;
    height: 100%;
    z-index: 1002;
  }

  .close {
    position: fixed;
    top: 40rpx;
    right: 40rpx;
    z-index: 1003;
    width: 80rpx;
    height: 80rpx;
    background-color: $uni-bg-color;
    border-radius: 5rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
